/**
 * Created by YIn on 2017/11/30.
 */

var arr_tit = [];
var net_speed = echarts.init(document.getElementById('net_speed'));
netSpeed_option = {
    textStyle: {
        color: '#dedec5'
    },
    title: {
        left: 'center',
        text: '网速动态数据',
        textStyle: {
            color: '#dedec5'
        }
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            animation: false
        },
        formatter: "{a}:{c}KB/s<br>{a1}:{c1}KB/s<br>{a2}:{c2}KB/s<br>{a3}:{c3}KB/s"
    },
    xAxis: {
        type: 'category',
        splitLine: {
            show: false
        },
        data: []
    },
    yAxis: {
        type: 'value',
        splitLine: {
            show: false
        }
    },
    series: [
        {
            name: '防火墙上行',
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: []
        },{
            name: '防火墙下行',
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: []
        },{
            name: '交换机上行',
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: []
        },{
            name: '交换机下行',
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: []
        }
    ]
};
net_speed.setOption(netSpeed_option);

// getNetSpeed();
//
// setInterval(function () {
//     getNetSpeed();
// }, 1000);
//
// function getNetSpeed() {
//     return $.get('/net_speed/', function (data) {
//         $this = data.Speed;
//         for (var i = 0; i < $this.fw_rx.length; i++) {
//             arr_tit.push(' ');
//         }
//         // kb
//         netSpeed_option.series[0].data = $this.fw_tx;  // 防火墙上行
//         netSpeed_option.series[1].data = $this.fw_rx;  // 防火墙下行
//         netSpeed_option.series[2].data = $this.sw_tx;  // 交换机上行
//         netSpeed_option.series[3].data = $this.sw_rx;  // 交换机下行
//         netSpeed_option.xAxis.data = arr_tit;
//         net_speed.setOption(netSpeed_option);
//         arr_tit = [];
//     });
// }

// function WebS() {
//     // 判断是否支持ws
//     if (!window.WebSocket) {
//         alert('该浏览器不支持WebSocket协议,请更换Chrome浏览器访问！');
//         return false;
//     } else {
//         if (window.s) {
//             window.s.onclose()
//         }
//         // 建立连接
//         ws = new WebSocket(wsUrl);
//         ws.onopen = function (evt) {
//             console.log('链接成功！');
//             window.s = ws;
//         };
//         ws.onclose = function (evt) {
//             console.log('Close Web')
//         };
//         ws.onmessage = function (evt) {
//             // console.log(evt.data);
//             $this = JSON.parse(evt.data);
//             for (var i = 0; i < $this.max_length; i++) {
//                 arr_tit.push(' ');
//             }
//             // kb
//             // console.log(JSON.parse($this));
//             netSpeed_option.series[0].data = $this.speed.fw_tx;  // 防火墙上行
//             netSpeed_option.series[1].data = $this.speed.fw_rx;  // 防火墙下行
//             netSpeed_option.series[2].data = $this.speed.sw_tx;  // 交换机上行
//             netSpeed_option.series[3].data = $this.speed.sw_rx;  // 交换机下行
//             netSpeed_option.xAxis.data = arr_tit;
//             net_speed.setOption(netSpeed_option);
//             arr_tit = [];
//         };
//         ws.onerror = function (evt) {
//             console.log('error')
//         };
//     }
// }
// var ws_net_speed = 'ws://' + window.location.host + "/net_speed/";
//
// window.addEventListener('load', WebS, false);

// var ws_net_speed = WebS('/net_speed/');
//
// ws_net_speed.addEventListener('open', function(){
//     console.log('net_speed 连接成功');
// });
// ws_net_speed.addEventListener('close', function(){
//     console.log('net_speed 连接关闭');
// });
// ws_net_speed.addEventListener('error', function(evt){
//     console.log('net_speed error');
// });
//
// ws_net_speed.addEventListener('message', function (evt){
//     var $this = JSON.parse(evt.data);
//     for (var i = 0; i < $this.max_length; i++) {
//         arr_tit.push(' ');
//     }
//     // kb
//     netSpeed_option.series[0].data = $this.speed.fw_tx;  // 防火墙上行
//     netSpeed_option.series[1].data = $this.speed.fw_rx;  // 防火墙下行
//     netSpeed_option.series[2].data = $this.speed.sw_tx;  // 交换机上行
//     netSpeed_option.series[3].data = $this.speed.sw_rx;  // 交换机下行
//     netSpeed_option.xAxis.data = arr_tit;
//     net_speed.setOption(netSpeed_option);
//     arr_tit = [];
// });

const NET_SPEED = yin_webs('/net_speed/');
NET_SPEED.onmessage = (msg) => {
    let $this = JSON.parse(msg.data);
    // console.log($this);
    if ($this.state === 1) {
        for (let i = 0; i < $this.max_length; i++) {
            arr_tit.push(' ');
        }
        // kb
        netSpeed_option.series[0].data = $this.speed.fw_tx;  // 防火墙上行
        netSpeed_option.series[1].data = $this.speed.fw_rx;  // 防火墙下行
        netSpeed_option.series[2].data = $this.speed.sw_tx;  // 交换机上行
        netSpeed_option.series[3].data = $this.speed.sw_rx;  // 交换机下行
        netSpeed_option.xAxis.data = arr_tit;
        net_speed.setOption(netSpeed_option);
        arr_tit = [];
    }

};


window.addEventListener("resize", function () {
    net_speed.resize();
});